<script lang="ts" setup>
import noticeIcon from '@/icons/notice.svg?component'
// import bscIcon from '@/icons/bsc.svg?component'
import timerIcon from '@/icons/clock.svg?component'
import bscIcon from '@/assets/images/home/bsc.png'
import idoBanner1 from '@/assets/images/home/new-ido-banner-1.png'
import idoBanner2 from '@/assets/images/home/new-ido-banner-2.png'
// import idoBanner3 from '@/assets/home/new-ido-banner-3.png'
import official from '@/icons/ido-official.svg?component'
import twitter from '@/icons/ido-twitter.svg?component'
import medium from '@/icons/ido-medium.svg?component'
import telegram from '@/icons/ido-telegram.svg?component'

import {IDO} from '@/types/ido'
import {toRefs} from "vue"
import {useRouter} from "vue-router";
import {useI18n} from "vue-i18n";

const props = defineProps<{
  list: IDO[],
}>()

const {list} = toRefs(props)

const router = useRouter()
const {t} = useI18n()

// const openUrl = (url: string) => {
//   window.open(url)
// }

const viewIDODetail = (id) => {
  console.log('ido id:', id)
  router.push({
    name: 'IDODetail',
    params: {
      id
    }
  })
}

const progressValue = (current: number, total: number) => {
  return Math.floor(current / total)
}

const progressArr: any = []
for (const item in list.value) {
  console.log('item:', item)
  // @ts-ignore
  progressArr.push(progressValue(item.curProgress, item.totalProgress))
}
console.log('progressArr:', progressArr)

</script>

<template>
<!--  <transition-group tag="ul" name="list" appear>-->
    <div class="ido-list align-self-center">
      <v-card class="ido-item" color="#BED4FF" variant="outlined" v-for="(item, index) in list" :key="index" data-aos="fade-up" data-aos-anchor-placement="top-center">
        <v-card-item>
          <div class="flex flex-row items-center">
            <notice-icon class="notice-icon"></notice-icon>
            <div class="date ml-5 xs:h-auto p-0 h-12 flex align-center">{{
                item.state === 0 ? t('message.ido.list.broadcast') : item.state === 2 ? item.openTime : t('message.ido.list.show')
              }}
            </div>
          </div>
        </v-card-item>
        <v-card-item>
          <div class="ido-banner-wrapper flex flex-col"
               :class="item.state === 0 ? 'ido-banner-wrapper2':'ido-banner-wrapper1'">
            <div class="flex flex-row justify-space-between items-center">
              <!--              <bsc-icon class="bsc-icon"></bsc-icon>-->
              <img :src="bscIcon" alt="" class="bsc-icon"/>
              <div class="time flex flex-row items-center">
                <timer-icon class="time-icon"></timer-icon>
                <div class="live" :class="item.state === 0 ? '!text-[white]' : ''">
                  {{ item.state === 0 ? t('message.ido.list.coming') : t('message.ido.list.live') }}
                </div>
              </div>
            </div>
            <img :src=" item.state === 0 ? idoBanner2 : idoBanner1" class="ido-banner align-self-center" alt=""/>
            <div class="contact align-self-center grid grid-cols-4 gap-x-2">
              <official class="contact-way"></official>
              <twitter class="contact-way"></twitter>
              <medium class="contact-way"></medium>
              <telegram class="contact-way"></telegram>
              <!--              <official class="contact-way" @click="openUrl(item.website)"></official>-->
              <!--              <twitter class="contact-way" @click="openUrl(item.twitter)"></twitter>-->
              <!--              <medium class="contact-way" @click="openUrl(item.medium)"></medium>-->
              <!--              <telegram class="contact-way" @click="openUrl(item.telegram)"></telegram>-->
            </div>
          </div>
        </v-card-item>
        <v-card-item>
          <div class="amount">
            <div class="flex flex-row justify-space-between text-[12px] font-medium mb-3 text-[#7A7893]">
              <div class="target">{{ t('message.ido.list.target') }}</div>
              <div>1 BNB = {{ item.state === 0 ? '0' : item.exchangePrice }} {{ item.symbol }}</div>
            </div>
            <div class="total mb-1 text-[24px] text-[#161615] font-bold">
              {{ item.state === 0 ? t('message.ido.list.TBA') : item.total + 'BNB' }}
            </div>
            <!--            TODO BNB兑换美元-->
            <!--            <div class="approx mb-1 text-[#7A7893]">≈$146780</div>-->
          </div>
        </v-card-item>
        <v-card-item>
          <div class="progress-label font-medium text-[#7A7893] mb-1">{{ t('message.ido.list.progress') }}</div>

          <v-progress-linear
            v-model="progressArr[index]"
            height="8"
            rounded
            bg-color="#BED4FF"
            color="#41CD7D"
            bg-opacity="0.8"
          ></v-progress-linear>

          <div class="progress-num mt-2 font-medium flex flex-row justify-space-between">
            <div class="finish-percent text-[#41CD7D]">{{ Math.floor(item.curProgress / item.totalProgress) }}%</div>
            <div>
              <span class="finish-num text-[#41CD7D]">{{ item.state === 0 ? 0 : item.curProgress }}</span>
              <span class="unFinish-num text-[#7A7893]">/{{ item.state === 0 ? 0 : item.totalProgress }}</span>
            </div>
          </div>
        </v-card-item>
        <v-card-item>
          <div class="grid grid-cols-3 mb-[12px]">
            <div class="flex flex-col">
              <div class="text-[#7A7893] font-medium text-[12px]">{{ t('message.ido.list.participant') }}</div>
              <div class="text-[#161615] font-bold text-[20px]">{{ item.state === 0 ? 'TBA' : item.participant }}</div>
            </div>
            <div class="flex flex-col">
              <div class="text-[#7A7893] font-medium text-[12px] align-self-center">{{ t('message.ido.list.max') }} BNB</div>
              <div class="text-[#161615] font-bold text-[20px] align-self-center">
                {{ item.state === 0 ? 'TBA' : item.presaleMax }}
              </div>
            </div>
            <div class="flex flex-col">
              <div class="text-[#7A7893] font-medium text-[12px] align-self-end">{{ t('message.ido.list.access') }}</div>
              <div class="text-[#161615] font-bold text-[20px] align-self-end">{{ item.access }}</div>
            </div>
          </div>
        </v-card-item>
        <v-card-actions class="dense justify-center">
          <v-btn
            color="#161615"
            variant="outlined"
            class="flex-1 border-[#BED4FF] !h-[46px] xl:text-[16px] text-[14px] font-medium rounded-[14px] text-capitalize"
            @click="viewIDODetail(item.id)"
          >
            {{ t('message.ido.list.detail') }}
          </v-btn>
          <v-btn
            color="white"
            dark
            class="flex-1 bg-[#2B6EEF] !h-[46px] xl:text-[16px] text-[14px] font-medium ml-4 rounded-[14px] text-capitalize"
            :class="item.state === 2 ? 'bg-[#7A7893]' : ''"
            :disabled="item.state === 2  || item.state === 0"
            v-if="item.state !== 0"
          >
            <v-icon dark>
              mdi-plus
            </v-icon>
            {{ t('message.ido.list.join') }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </div>
<!--  </transition-group>-->

</template>

<style lang="scss" scoped>
.ido-list {
  margin-top: 34px;
  @apply grid grid-cols-3 xl:gap-10 lg:gap-10 md:gap-8 sm:gap-8 xs:gap-y-4 md:grid-cols-2 sm:grid-cols-1 xs:grid-cols-1;

  .ido-item {
    border-radius: 32px;
    padding: 22px 16px;
    @apply w-auto sm:min-w-[462px] xs:w-full xs:px-[8px];

    .notice-icon {
      width: 56px;
      height: 32px;
      @apply xs:w-[58px] xs:h-[36px];
    }

    .date {
      font-size: 16px;
      font-family: DINPro-Regular, DINPro;
      font-weight: 400;
      color: #161615;
      flex: 1;
    }

    .bsc-icon {
      width: 26px;
      height: 26px;
      margin-left: 16px;
    }

    .time {
      padding: 14px 16px;
      background: #2C2B2B;
      border-radius: 13px;
      width: max-content;
      margin-top: 12px;
      margin-right: 12px;

      .time-icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }

      .live {
        font-size: 14px;
        font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
        font-weight: normal;
        color: #94DB89;
      }
    }

    .ido-banner-wrapper {
      margin-top: 12px;
      margin-bottom: 4px;
      border-radius: 12px;

      .ido-banner {
        margin-bottom: 20px;
      }

      .contact {
        margin-bottom: 20px;

        .contact-way {
          cursor: pointer;
          width: 28px;
          height: 28px;
        }
      }
    }

    .ido-banner-wrapper1 {
      background: url('../assets/images/home/new-ido-bg1.png') no-repeat left center;
      background-size: 100% 100%;
    }

    .ido-banner-wrapper2 {
      background: url('../assets/images/home/new-ido-bg2.png') no-repeat left center;
      background-size: 100% 100%;
    }

    .ido-banner-wrapper3 {
      background: url('../assets/images/home/new-ido-bg3.png') no-repeat left center;
      background-size: 100% 100%;
    }
  }
}

/* list transitions */
.ido-list ul {
  position: relative;
}

.list-enter-from {
  opacity: 0;
  transform: scale(0.6);
}

.list-enter-active {
  transition: all 0.4s ease;
}

.list-leave-to {
  opacity: 0;
  transform: scale(0.6);
}

.list-leave-active {
  transition: all 0.4s ease;
  position: absolute; /* for move transition after item leaves */
}

.list-move {
  transition: all 0.3s ease;
}
</style>
